<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id = "div1">
        id :<input type="text" value="id" v-model="id">
        name : <input type="text" value="name" v-model="name">
        <input type="button" value="添加" @click = "add">
        <!-- key 在使用中 只能用 数字 或者 string -->
        <!-- 必须在 k-bink: 中使用 -->
        <!-- key 唯一 -->
        <p v-for = "item in list" :key= "item.id">
            {{item.name}}{{item.id}}
        </p>

        <p>--------------------</p>
        <p v-for = "(user,i) in list">id : {{user.id}}--{{user.name}}--{{i}}
        </p>
        <p>____________________________</p>
        <p v-for = "(val,key) in user">
            <!-- for 可以遍历对象列表  -->
            键是{{val}},值是{{key}}
        </p> 
    </div>

    <script>
        var vm = new Vue({
            el : "#div1",
            data : {
                id :'',
                name : '',
                list :[{id : 1 ,  name : '赤城'},
                        {id : 2 , name : '加贺'},
                        {id : 3 ,  name : '天成'},
                        {id : 4 ,  name : '780'},
                        {id : 5 ,  name : '390'},],
                user: {
                    id:1,
                    name :2,
                    age :3,
                }
            },
            methods: {
                add(){
                    if(this.id != '' && this.name != ""){
                    this.list.push({id : this.id , name :this.name})
                    }else{
                        alert("错误")
                    }
                }
            },
        })
    </script>
    
</body>
</html>